$(document).ready(function () {
    let selectedDriver = null;
    let selectedVehicle = null;
    let currentRequestId = null;
    let acceptFlow = false;
    let toBooking = false;
    let assignActionUrl = "";

    function fetchDrivers(query = '') {
        $.get(driverSearchUrl, { q: query }, function (data) {
            let html = '';
            data.forEach(driver => {
                html += `
                <div class="col-md-6 col-sm-6 profile_details pb-2">
                    <div class="well profile_view driver-card selectable shadow-sm"
                        data-id="${driver.id}">
                        <div class="col-sm-12">
                            <h4 class="brief"><i>${driver.name}</i></h4>
                            <div class="left col-md-7 col-sm-7">
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-envelope"></i> Email: ${driver.email}</li>
                                    <li><i class="fa fa-phone"></i> Phone: ${driver.phone}</li>
                                    <li><i class="fa fa-user"></i> Age: ${driver.age ?? ''} years</li>
                                    <li><i class="fa fa-user"></i> Experience: ${driver.experience ?? ''}</li>
                                </ul>
                            </div>
                            <div class="right col-md-5 col-sm-5 text-center">
                                <img src="${driver.image ? '/storage/' + driver.image : '/images/user.png'}"
                                    class="img-circle img-fluid" alt="">
                            </div>
                        </div>
                        <div class="profile-bottom text-center">
                            <div class=" col-sm-6 emphasis">
                                
                            </div>

                        </div>
                    </div>
                </div>`;
            });
            $('#driverCards').html(html);
        });
    }

    function fetchVehicles(query = '') {
        $.get(vehicleSearchUrl, { q: query }, function (data) {
            let html = '';
            data.forEach(vehicle => {
                html += `
                <div class="col-md-6 col-sm-6 profile_details pb-2">
                    <div class="well profile_view vehicle-card selectable selectVhicle_card shadow-sm"
                        data-id="${vehicle.id}">
                        <div class="col-sm-12">
                            <h4 class="brief"><i>${vehicle.registration_number}</i></h4>
                            <div class="left col-md-7 col-sm-7">
                                <h2>${vehicle.make} ${vehicle.model}</h2>
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-building"></i> GPS: ${vehicle.has_gps ? 'Enabled' : 'No'}</li>
                                    <li><i class="fa fa-phone"></i> Model: ${vehicle.year}</li>
                                </ul>
                            </div>
                            <div class="right col-md-5 col-sm-5 text-center">
                                <img src="${vehicle.vehicle_image ? '/storage/' + vehicle.vehicle_image : '/images/taxi-city.jpg'}"
                                    class="img-circle img-fluid" alt="">
                            </div>
                        </div>
                        <div class="profile-bottom text-center">
                            <div class=" col-sm-6 emphasis">
                                
                            </div>
                        </div>
                    </div>
                </div>`;
            });
            $('#vehicleCards').html(html);
        });
    }

    $('#driverSearch').on('keyup', function () {
        fetchDrivers($(this).val());
    });

    $('#vehicleSearch').on('keyup', function () {
        fetchVehicles($(this).val());
    });

    $(document).on('click', '.driver-card', function () {
        $('.driver-card').removeClass('active');
        $(this).addClass('active');
        selectedDriver = $(this).data('id');
    });

    $(document).on('click', '.vehicle-card', function () {
        $('.vehicle-card').removeClass('active');
        $(this).addClass('active');
        selectedVehicle = $(this).data('id');
    });

    $('#nextToVehicle').on('click', function () {
        if (!selectedDriver) {
            Swal.fire('Error', 'Please select a driver first!', 'error');
            return;
        }
        $('.step-driver').addClass('d-none');
        $('.step-vehicle').removeClass('d-none');
    });

    $('.backToDriver').on('click', function () {
        $('.step-vehicle').addClass('d-none');
        $('.step-driver').removeClass('d-none');
    });

    $('#saveAssignment').on('click', function () {
        if (!selectedVehicle) {
            Swal.fire('Error', 'Please select a vehicle!', 'error');
            return;
        }

        if (toBooking || acceptFlow === true) {
            assignRide(selectedDriver, selectedVehicle, "all");
        } else {
            assignRide(selectedDriver, selectedVehicle, "single");
        }

        Swal.fire({
            title: "Assign to all pending rides?",
            text: "Choose Yes to assign to all rides in this booking, or No to assign only this ride.",
            icon: "question",
            showCancelButton: true,
            confirmButtonText: "Yes, all rides",
            cancelButtonText: "No, only this ride"
        }).then((result) => {
            if (result.isConfirmed) {
                assignRide(selectedDriver, selectedVehicle, "all");
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                assignRide(selectedDriver, selectedVehicle, "single");
            }
        });
    });

    function assignRide(driverId, vehicleId, type) {
        $.ajax({
            url: assignActionUrl, 
            method: "POST",
            data: {
                _token: csrfToken,
                driver_id: driverId,
                vehicle_id: vehicleId,
                assign_type: type,
                is_accept_flow: acceptFlow
            },
            success: function (response) {
                Swal.fire("Success", response.message, "success").then(() => {
                    location.reload();
                });
            },
            error: function (xhr) {
                let errorMessage = "Something went wrong!";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire("Error", errorMessage, "error");
            }
        });
    }

    // Public function to open modal from anywhere
    window.openAssignModal = function (requestId = null, preselectedDriver = null, preselectedVehicle = null, accept_Flow = false, bookingId = null, fromBooking = false, to_booking = false) {
        currentRequestId = requestId;
        selectedDriver = preselectedDriver;
        selectedVehicle = preselectedVehicle;
        acceptFlow = accept_Flow;
        toBooking = to_booking;

        if (fromBooking && bookingId) {
            assignActionUrl  = `/booking/assign/${bookingId}`;
            currentRequestId = bookingId;
            console.log('Assign modal URL:', assignActionUrl, 'From Booking:', fromBooking, bookingId);
        } else if (requestId) {
            assignActionUrl  = assignUrl.replace(':id', requestId);
            console.log('Assign modal URL:', assignActionUrl, 'From trips:', requestId);
        }

        $('#assignModal').modal('show');
        $('.step-vehicle').addClass('d-none');
        $('.step-driver').removeClass('d-none');

        fetchDrivers();
        fetchVehicles();

        // Small delay to ensure DOM updates before selecting
        setTimeout(() => {
            if (preselectedDriver) {
                $(`#driverCards .driver-card[data-id="${preselectedDriver}"]`).addClass('active');
            }
            if (preselectedVehicle) {
                $(`#vehicleCards .vehicle-card[data-id="${preselectedVehicle}"]`).addClass('active');
            }
        }, 500);
    };
});